<template>
	<el-dialog  draggable overflow :title="titleMap[mode]" v-model="visible" :width="800" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="70px">
			<el-row>
				<el-col :span="6">
					<el-form-item label="计划号" prop="code">
						<el-input v-model="form.code" disabled placeholder="自动生成"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="加工厂" prop="outfactory_id">
						<skAutoChoose v-model="form.outfactory.name" :name="'company'" :asKey="'outfactory_id'"
							:assign="form" :browserShow="false" :params="[{ finance_id: -1 }, {
								category_id: { 'value': [4, 73, 74, 75, 76, 77, 89, 90], 'type': 'in' }
							}]">
						</skAutoChoose>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="工艺" prop="bom_id">
						<skAutoChoose v-model="form.bom.name" :name="'bom'" :assign="form" :browserShow="false"
							@select="selectBom">
						</skAutoChoose>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="备注" prop="remark">
						<el-input v-model="form.remark" placeholder=""></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="品名" prop="material_id">
						<skAutoChoose v-model="form.material.name" :name="'material'" :assign="form" :prepend_width="'60px'"
							@select="materialSelect" :browserShow="false" :params="[{ material_nature_id: 3 }]">
							<template #prepend>{{
								form.material.spec
							}}</template>
						</skAutoChoose>
					</el-form-item>
				</el-col>

				<el-col :span="6">
					<el-form-item label="形态" prop="type_id">
						<skDicSelect v-model="form.type_id" :code="'type'" :placeholder="'请选择形态'" :editsource="'default'">
						</skDicSelect>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="批号" prop="lot_name">
						<skAutoChoose v-model="form.lot_name" :name="'lot'" :browserShow="false">
						</skAutoChoose>
						<!-- <skAutoChoose v-model="form.lot_name" :code="'lot'" :browserShow="false" :assign="form">
            </skAutoChoose> -->
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="颜色" prop="color_id">
						<skAutoChoose v-model="form.color.name" :name="'color'" :assign="form" :prepend_width="'60px'"
							@select="colorSelect" :browserShow="false">
							<template #prepend>{{ form.color.code }}</template>
						</skAutoChoose>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="计划数" prop="quantity">
						<el-input v-model="form.quantity" @keyup="setAmount">
							<template #prepend>
								<el-input v-model="form.auxiliary_quantity" @keyup="setQuantity" placeholder="包数" />
							</template>
						</el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="单价" prop="price">
						<el-input v-model="form.price" @keyup="setAmount"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="金额" prop="amount">
						<el-input v-model="form.amount" @keyup="setPrice"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="约定公重" prop="standard_quantity">
						<el-input v-model="form.standard_quantity"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<sc-VxeTable :tablecode="'pro_outsourcing_plan_save'" :data="form.details" :gridOps="gridSubOpts" ref="subbe">
		</sc-VxeTable>
		<!-- </sc-water-mark> -->
		<template #footer>
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
import tool from "@/utils/tool";
import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
// import XEUtils from "xe-utils";
export default {
	emits: ["success", "closed"],
	components: { skAutoChoose, skDicSelect },
	data() {
		return {
			mode: "add",
			form: {
				material: {},
				color: {},
				lot_name: "",
				bom: {},
				outfactory: {},
				details: [],
			},
			gridSubOpts: {
				height: 250,
				columns: [
					{
						field: "material.name",
						event: {
							select: ({ e, row }) => {
								row["material"] = e;
							},
						},
					},
					{
						field: "color.name",
						event: {
							select: ({ e, row }) => {
								row["color"] = e;
							},
						},
					},
				],
			},
			titleMap: {
				add: "新增",
				edit: "编辑",
			},
			rules: {
				bom_id: { required: true, message: "工艺必填" },
				type_id: { required: true, message: "形态必选" },
				lot_name: { required: true, message: "批号必填" },
				outfactory_id: { required: true, message: "加工厂必选" },
				quantity: { required: true, message: "必须输入计划数量" },
				price: { required: true, message: "必须输入单价" },
				material_id: { required: true, message: "品名必填" },
			},
			visible: false,
			isSaveing: false,
		};
	},
	mounted() { },
	methods: {
		setQuantity() {
			this.form.quantity =
				25 *
				(tool.isNumber(this.form.auxiliary_quantity)
					? this.form.auxiliary_quantity
					: 0);
			this.setAmount();
		},
		setAmount() {
			this.form.quantity = tool.isNumber(this.form.quantity)
				? this.form.quantity
				: 0;
			this.form.price = tool.isNumber(this.form.price)
				? this.form.price
				: 0;
			this.form.amount = this.form.quantity * this.form.price;
		},
		setPrice() {
			this.form.quantity = tool.isNumber(this.form.quantity)
				? this.form.quantity
				: 0;
			let price = this.form.amount / this.form.quantity;
			this.form.price = tool.isNumber(price) ? price : 0;
		},
		selectBom(data) {
			delete data.code;
			delete data.id;
			delete data.name;
			delete data.status_id;
			delete data.remark;
			//清除ID
			data.details = data.details.map((v) => {
				delete v.id;
				return v;
			});
			Object.assign(this.form, tool.removeNull(data));
		},
		open(mode = "add") {
			this.mode = mode;
			this.visible = true;
			return this;
		},
		materialSelect(data) {
			this.form.material = data;
		},
		colorSelect(data) {
			this.form.color = data;
		},
		//表单提交方法
		submit() {
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					var res = await this.$API.pro.outsourcing.plan.save.post(
						this.form
					);
					this.isSaveing = false;
					if (res.code == 200) {
						this.$emit("success", this.form);
						this.visible = false;
						this.$message.success("操作成功");
					}
				}
			});
		},
		//表单注入数据
		setData(data) {
			Object.assign(this.form, tool.removeNull(data));
		},
	},
};
</script>

<style>
.attachments .el-upload--picture-card,
.attachments .el-upload-list--picture-card .el-upload-list__item {
	width: 100px;
	height: 100px;
	overflow: hidden;
}
</style>
